import { PureComponent } from 'react';
import {
    Row,
    Col,
    Form,
    Input,
    Modal,
    Select,
    Cascader
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;


// 新增表单
@Form.create()
class CreateForm extends PureComponent {

constructor(props) {
    super(props);
    this.state = {
		dictid:null,
    };

}

	okHandle = () => {
		const { form,handleAddByDict } = this.props;
		const { dictid } = this.state;
    	form.validateFields((err, fieldsValue) => {
	        if (err) return;
	        if(fieldsValue.cascader) {
	        	fieldsValue.parentvalue = fieldsValue.cascader[fieldsValue.cascader.length - 1];
	        }
	        fieldsValue.dictid = dictid;
		    handleAddByDict(fieldsValue);
		    form.resetFields();
		});
	};
	handleChange = (value,e) => {
		const { dispatch } = this.props;
		dispatch({
	    	type: 'prodictionarys/get_all_children',
	    	payload: {
	    		dictid:e.props.dictid
	    	}
	    });
		this.setState({
			dictid: e.props.dictid
		})
	};
	onChange = (value) => {

	};
	
	resetButton = () => {
		this.setState({
			dictid:null,
		})
	};

render() {
    const { modalVisibleByDict, form, handleModalVisibleByDict,dictionarysTypeBySelect,cascaderList } = this.props;
    const { dictid } = this.state;
return (
    <Modal
width={800}
destroyOnClose
title="新增"
visible={modalVisibleByDict}
onOk={this.okHandle}
onCancel={() => handleModalVisibleByDict()}
afterClose={() => this.resetButton()}
>
<Form  layout="vertical">
 	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
		<Col  md={12} sm={24}>
	        <FormItem  label="字典类型">
	            {form.getFieldDecorator('type', {
	            rules: [{ required: true, message: '请选择字典类型！', min: 1 }],
	            })(		                
	            	<Select 
	            	placeholder="请选择" 
	            	showSearch
	            	optionFilterProp="children"
	            	onChange={this.handleChange}
	            	filterOption={(input, option) =>     		
	            		option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
				    } 
				    style={{ width: '100%' }}
				    >
	                	{dictionarysTypeBySelect != undefined?dictionarysTypeBySelect.list.map((item,index) => {
	                		return <Option dictid={item.dictid} value={item.key}>{item.title}</Option>
	                	}):null}
		            </Select>
		        )}
	        </FormItem>
        </Col>
        <Col  md={12} sm={24}>
	        <FormItem  label="常量名称">
	            {form.getFieldDecorator('title', {
	            rules: [{ required: true, message: '请输入常量名称！', min: 1 }],
	            })(<Input placeholder="请输入" />)}
	        </FormItem>
        </Col>
        
    </Row>
    {dictid == "AB"?(
    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
    
	    	<Col  md={12} sm={24}>
		        <FormItem  label="上级省市县">
		            {form.getFieldDecorator('cascader', {
		            rules: [{ required: false }],
		            })(<Cascader options={cascaderList != undefined?cascaderList.list:null} onChange={this.onChange} placeholder="请选择" changeOnSelect />)}
		        </FormItem>
	        </Col>
	
	    </Row>
    ):null}
    

</Form>
</Modal>
);
}

}

export default CreateForm;
